<template>
    <el-container class="renzheng">
      <el-header></el-header>
      <el-main>
        <div style="padding:0 20px" v-html="list.content"></div>
      </el-main>
      <el-footer>
          <div><el-radio v-model="radio"></el-radio><p @click="open">我同意《云商汇平台诚信会员服务购买协议》</p></div>
          <span @click="buy">同意协议并去购买</span>

      </el-footer>
      <div class="show" v-if="show"></div>
      <div class="xieyi" v-if="show">
        <el-main>
          <div style="padding: 0 20px" v-html="buyXy.content"></div>
        </el-main>
        <el-button type="danger" @click.stop="close">确定</el-button>

      </div>
    </el-container>
</template>

<script>
    export default {
       data(){
         return{
          list: {},//权益说明协议
           buyXy:{},//购买协议
          radio:'',
           show:false,

         }
       },
      methods:{
        open() {
          this.show = true
        },
        close(){
          this.show = false;
        },
        buy(){
          if(this.radio == ''){
            this.$message.warning('请同意相关协议');
            return ;
          }
          this.$router.push('/buy')
        },

      },
      mounted(){

      },
      created(){
         //会员购买前的权益说明
        let params = {
          type:3
        }
        this.$axios.post('/api/front/protocol/select',this.qs.stringify(params))
          .then(res => {
            this.list = res.data.obj;
          })
        //会员购买协议说明
        let data = {
          type:1
        }
        this.$axios.post('/api/front/protocol/select',this.qs.stringify(data))
          .then(res => {
            this.buyXy = res.data.obj
          })

      }
    }
</script>

<style scoped lang="scss">
  .renzheng{
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
   .el-main{
     h5{
       font-size: 16px;
     }
     p{
       color: #ccc;
       font-size: 14px;
       margin: 0;
       text-align: left;
       padding: 0 20px;
       text-indent: 28px;
     }
   }
    .el-footer{
      padding: 0;
      margin: 20px 0;
      display: flex;
      flex-direction: column;
      div{
        display: flex;
        flex-direction: row;
        justify-content: center;
        .el-radio{

        }
        p{
          margin: 0;
          padding: 0;
          color: #5193ff;
        }
      }

      span{
        width: 80%;
        margin: 20px auto;
        border-radius: 4px;
        padding: 10px 0;
        background: orangered;
        color: #fff;
        font-size: 16px;
      }

    }
    .show{
      width: 100%;
      position: absolute;
      top: 0;
      height: 100%;
      background: #000;
      z-index: 2;
      opacity: 0.5;
    }
    .xieyi{
      position: absolute;
      top:50px;
      height: 80%;
      width: 90%;
      left: 5%;
      background: #fff;
      z-index: 66;
      border-radius: 6px;
      .el-main{
        height: 90%;
        h5{
          font-size: 16px;
        }
        p{
          color: #ccc;
          font-size: 14px;
          margin: 0;
          text-align: left;
          padding: 0 20px;
          text-indent: 28px;
        }
      }

    }
  }
</style>
